var imageList = [
	'blur.png','bg.jpg', 'hasd.png', 'f_1.jpg', 'txt_btn.png' ,
	'f_10.jpg', 'f_11.jpg', 'f_12.jpg', 'f_13.jpg', 'f_14.jpg', 
	'f_15.jpg', 'f_16.jpg', 'f_17.jpg', 'f_18.jpg', 'f_19.jpg', 
	'f_2.jpg', 'f_20.jpg', 'lg_2.png' , 'lg_1.png' , 'f_21.jpg', 
	'f_22.jpg', 'f_23.jpg', 'f_24.jpg', 'f_25.jpg', 'f_26.jpg', 
	'f_3.jpg', 'f_4.jpg', 'f_5.jpg', 'f_6.jpg', 'f_7.jpg', 'f_8.jpg',
	'f_9.jpg', 'jiaopian.png', 'lines.png', 'load_bg.png', 'load_ico.png', 
	'music.png', 'm_0.png', 'm_1.png', 'm_2.png', 'm_3.png', 'm_4.png', 
	'm_5.png', 'p2_bg.jpg', 'p4_bg.jpg', 'people.png', 'peo_bg.jpg', 
	'peo_front.png', 'point_down.png', 'share.png', 'share_ico.jpg', 
	'slight.png','t1_1.png', 't1_2.png', 't1_3.png', 't1_4.png', 
	't1_5.png', 't1_6.png', 't1_7.png', 't2_1.png', 't2_2.png', 
	't2_3.png', 't4_1.png', 't4_2.png', 't4_3.png', 't4_4.png', 
	't4_5.png', 'txt.png'
];


var BoIndex = 0;
var isPlaying = false;
var swiper = null;
var sound = null;

$(function() {
	$('body').on('touchmove', function(event) {
		event.preventDefault();
	}).on('touchstart', function(event) {
		event.preventDefault();
	});
	$('#page').height($(window).height());

	swiper = new Swiper('.swiper-container', {
		direction: 'vertical',
		onSlideChangeStart: function(swiper) {
			$('.page3 .t5 , .txt_new , .gd , .page4 .t2 , .page4 .t1 , .page2 .t5 , .page3 .t6 , .page2 .t1,.page3 .t1').removeClass('mv');
			$('.gl1,.gl2,.gl3,.gl4,.gl5,.gl6,.gl7').removeClass('mv');
			if(1==swiper.activeIndex){
				$('.txt_new,.gd').addClass('mv'); 
				setTimeout(function() {
					
						setTimeout(function(){
							$('.gl1,.gl3,.gl5,.gl7').addClass('mv');
							setTimeout(function(){
								$('.gl2,.gl4,.gl6').addClass('mv');
							},1500);
						},500); 
				}, 500);
			}
			if (2 == swiper.activeIndex) {
				setTimeout(function() {
					$('.page2 .t5 , .page2 .t1 ').addClass('mv');
				}, 500);
			} else if (3 == swiper.activeIndex) {
				setTimeout(function() {
					$('.page3 .t5 , .page3 .t6 ,.page3 .t1 ').addClass('mv');
				}, 500);
			} else if (4 == swiper.activeIndex) {
				$('.page4 .t2,.page4 .t1').addClass('mv');
				setTimeout(function() {
					$('.page4 .t5,.page4 .t4').fadeIn();
				}, 2500);
			}
		}
	});

	initBo();
	isPlaying = true;
	playBo();

	$.get('img/bg.jpg', function() {
		loaddata();
	});

	$('.page4 .t5').on('touchstart', function() {
		$('#sharemark').fadeIn();
	});

	$('.page4 .t4').on('touchstart', function() {
		location.href = 'https://mbank.spdbccc.com.cn/creditcard/indexActivity.htm?data=000004';
	})

	$('#sharemark').on('touchstart', function() {
		$('#sharemark').fadeOut();
	});

	sound = document.getElementById('sound');

	$('#music').on('touchstart', function() {
		if (isPlaying) {
			sound.pause();
			isPlaying = false;
		} else {
			sound.play();
			isPlaying = true;
			playBo();
		}
	});
});


function initBo() {
	for (var i = 1; i < 6; i++) {
		$('#music').append('<img src="img/m_' + i + '.png" class="bo bo' + i + '">');
	}
}

function playBo() {
	BoIndex = (BoIndex + 1) % 5 + 1;
	$('#music img').hide();
	$('#music img.bo' + BoIndex).show();
	if (isPlaying) {
		setTimeout(function() {
			playBo();
		}, 150);
	}
}

function stopBo() {
	isPlaying = false;
}

function loaddata() {
	$('.load_page').fadeIn();
	var c = 0;
	var t = imageList.length;
	for (var im in imageList) {
		var timg = new Image();
		timg.onload = function() {
			c++;
			var per = parseInt(100 * c / t);
			$('.load_page p b').text(per + '%');
			if (per >= 100) {
				for (var i = 1; i < 27; i++) {
					var src = 'img/f_' + i + '.jpg';
					$('.frame').append('<div style="background-image:url(' + src + ')" ></div>');
				}
				setTimeout(function() {
					$('.load_page').fadeOut(1000, function() {
						setTimeout(main, 500);
					});
				}, 500);
			}
		}
		timg.src = 'img/' + imageList[im] ;//+ '?t=' + Math.random();
	}
}

function main() {
	$('.lines').show();
	$('#framemark').fadeIn();
	$.each($('.frame div'), function(i, d) {
		var tm = i*200;
		if(i>19){
			tm += (i-19)*200;
		}
		setTimeout(function() {
			$(d).addClass('mv');
			if (i == $('.frame div').length - 1) {
				$('#framemark').hide();
				setTimeout(showpage1, 1000);
			}
			if(!$('#framemark img').hasClass('mv')) $('#framemark img').addClass('mv');
		}, tm);
		setTimeout(function(){ $('#framemark img').removeClass('mv').addClass('mv2'); },3000);
	});
	
}

function showpage1() {
	
	$('.page1').fadeIn();
	$('.pagebtn').unbind('touchstart').on('touchstart', function(ev) {
		ev.preventDefault();
		setTimeout(function() {
			swiper.slideNext();
		}, 500);
	});
}